<template>
  <div class="app-container">

    <!-- <el-button type="primary" @click="handleAddRole">新增</el-button> -->
               一级分类
          <el-select @change="bingclassifyNoe"    v-model="PClassId" placeholder="请选择">
                <el-option
                  v-for="item in PClass"
                        :key="item.id"
                        :label="item.names"
                        :value="item.id"
                >
                </el-option>
            </el-select>
                二级分类
            <el-select @change="bingclassifyTow"     v-model="SunClassId" placeholder="请选择">
                <el-option
                  v-for="item in SunClass"
                        :key="item.id"
                        :label="item.names"
                        :value="item.id"
                >
                </el-option>
          </el-select>
      <div style="height:650px">
          <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>
            <el-table-column width="50"  label="ID" >
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column     label="素材名称" >
              <template slot-scope="scope">
                {{ scope.row.soureName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="素材类型ID">
              <template slot-scope="scope">
                {{ scope.row.typeId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="素材价格">
              <template slot-scope="scope">
                {{ scope.row.prices }}
              </template>
            </el-table-column>
            <el-table-column width="300" align="center" label="素材地址" >
              <template slot-scope="scope">
                {{ scope.row.downUrl }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="点击量">
              <template slot-scope="scope">
                {{ scope.row.clickNum }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="更新时间">
              <template slot-scope="scope">
                {{ scope.row.updateTime }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                  <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
                      <el-button slot="reference" type="danger">删除</el-button>
                  </el-popconfirm>
              </template>
            </el-table-column>

          </el-table>
    </div>
    <el-pagination
            background
            layout="prev, pager, next,sizes,total"
            :total='total'
            @current-change='current_change'
            @size-change='size_change'
            style="text-align: center; margin-top: 60px;"
            :page-sizes="[10, 50, 100, 1000]"
            >
    </el-pagination>

  </div>
</template>

<script>
import api from '@/api/material/goods'


export default {
  name: 'GoodsList',

  data() {
    return {
        rolesList:[],
        type:'',
        total:0,
        limit:10,
        page:1,
        loading:false,
        PClassId:'',
        PClass:[],
        SunClassId:'',
        SunClass:[],
        classALL:'',
    }
  },
  created() {
  
  },
  mounted(){
      api.typeList({
        limit:1000,
        page:1
      }).then(res=>{
        this.classALL=res.data.data.list
        res.data.data.list.map(item=>{
            this.PClass.push(item.PClass)
        })

        this.PClassId=this.PClass[0].id
        this.bingclassifyNoe(this.PClassId)
        this.SunClassId=this.SunClass[0].id
        this.type=this.SunClassId
        this.versionList()
      })
    
  },
  methods: {

      bingclassifyNoe(e){
          this.SunClass=[]
          this.SunClassId=''
          for (let i=0;i<this.classALL.length;i++){
            if(this.classALL[i].PClass.id==e){
                this.SunClass=this.classALL[i].SunClass
                return
            }
          }
      },
      bingclassifyTow(e){
          this.type=e
          this.versionList()
      },

     handleAddRole(){

      },
      handleEdit(e){
          this.$router.push({ path: './edit',query:{id:e.id}})
      },
      handleDelete(e){
         api.Delete(e).then(res=>{
            if(res.data.errno==0)
            {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.versionList()
            }
         })
      },
    current_change(e){
       this.page=e
       this.versionList()
     },
     size_change(e){
       this.limit=e
       this.versionList()
     },
    versionList() {
      this.loading = true
      api.listGoods({
          limit:this.limit,
          page:this.page,
          type:this.type
      }).then(res => {
        if(res.data.errno==0){
                this.rolesList=res.data.data.list
                this.total=res.data.data.list.length
                this.page=res.data.data.page
                this.pages=res.data.data.pages
                this.total=res.data.data.total
                this.limit=res.data.data.limit
                this.loading=false
            }
      }).catch(() => {
        this.Loading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>


</style>